import {Divider, Icon, Popconfirm, Table, Tag, Tooltip} from 'antd'
import React, {Component} from 'react'
import moment from 'moment'

import PreviewModal from '../common/preview-modal'
import {FormattedMessage} from 'react-intl'
import {withRouter} from 'react-router-dom'

const STATUS_STYLES = [{
  code: -1,
  text: <FormattedMessage id='添加失败' />,
  style: 'fail'
}, {
  code: 1,
  text: <FormattedMessage id='添加成功' />,
  style: 'success'
}, {
  code: 0,
  text: <FormattedMessage id='排队中' />,
  style: 'waiting'
}]

class QuizzesTable extends Component {
  constructor (props) {
    super(props)
    this.state = {
      visible: false,
      quiz: {}
    }
  }

  previewPage (quiz) {
    this.setState({
      visible: true,
      quiz
    })
  }

  closeModal () {
    this.setState({
      visible: false,
      quiz: {}
    })
  }

  editQuiz (quiz) {
    this.props.history.push(`/simpleCodingQuizzes/${quiz.id}/editor`)
  }

  render () {
    const columns = [{
      title: <FormattedMessage id='题目ID' />,
      dataIndex: 'id',
      sorter: (a, b) => a.id - b.id
    }, {
      title: <FormattedMessage id='名称' />,
      dataIndex: 'homeworkName',
      sorter: (a, b) => a.homeworkName.length - b.homeworkName.length,
      className: 'description-style'
    }, {
      title: <FormattedMessage id='标签' />,
      dataIndex: 'tags',
      sorter: (a, b) => a.tags.length - b.tags.length
    }, {
      title: <FormattedMessage id='创建时间' />,
      dataIndex: 'createTime',
      render: (text) => <small>{text}</small>
    }, {
      title: <FormattedMessage id='创建者' />,
      dataIndex: 'maker',
      sorter: (a, b) => a.maker.length - b.maker.length
    }, {
      title: <FormattedMessage id='状态' />,
      key: 'status',
      dataIndex: 'status',
      sorter: (a, b) => a.status - b.status,
      render: (text, record) => {
        const statusStyle = STATUS_STYLES.find(s => s.code === record.status) || {style: '', text: ''}

        return <span className={`homework-status-${statusStyle.style}`}>{statusStyle.text}</span>
      }
    }, {
      title: <FormattedMessage id='操作' />,
      key: 'action',
      render: (text, record) => (
        <span>
          <Tooltip placement='top' title='预览' overlay='preview'>
            <Icon type='eye' className='icon-style' onClick={this.previewPage.bind(this, record)} />
          </Tooltip>
          <Divider type='vertical' />

          <Tooltip placement='top' title='编辑' overlay='edit'>
            <Icon type='edit' className='icon-style' onClick={this.editQuiz.bind(this, record)} />
          </Tooltip>
          <Divider type='vertical' />

          <Popconfirm title={<FormattedMessage id='确定删除吗?' />}
            onConfirm={() => this.props.onDeleteQuiz(record.id)}
            okText={<FormattedMessage id='确定' />} cancelText={<FormattedMessage id='取消' />}>

            <Icon type='delete' className='icon-style' />
          </Popconfirm>
        </span>
      )
    }]

    const {visible, quiz} = this.state
    const quizzes = this.props.dataSource.map(quiz => {
      quiz.createTime = moment(quiz.createTime).format('YYYY-MM-DD')
      if (quiz.tags) {
        return Object.assign({}, quiz, {tags: quiz.tags.map(tag => <Tag key={tag.id}>{tag.name}</Tag>)})
      }
      return quiz
    })
    return (<div className={'table-style'}>
      <Table rowKey={record => record.id}
        columns={columns}
        dataSource={quizzes}
        pagination={this.props.pagination}
        bordered
        className='table-center' />
      {Object.keys(quiz).length === 0
        ? ''
        : <PreviewModal visible={visible}
          quiz={quiz}
          type={this.props.type}
          closeModal={this.closeModal.bind(this)}
        />}
    </div>)
  }
}

export default withRouter(QuizzesTable)
